﻿@inject IOptionsSnapshot<SiteOptions> SiteOptions
@inject IBlogPostService BlogPostService
@inject IDistributedCacheHelper CacheHelper

@{
    const string cacheKeyForCategories = "_TuiJianNewsPartial";

    async Task<BlogPostListViewModel> GetDataFromDb()
    {
        BlogPostListViewModel vm = new();
        vm.Categories = new();
        string[] categorySlugs = { "dotnet-more-dotnet-other", "dotnet-web-blazor", "dotnet-web-api" };
        foreach (var categorySlug in categorySlugs)
        {
            var posts = await BlogPostService.BlogPostBriefListByCategorySlugAsync(new BlogPostBriefListByCategorySlugRequest(categorySlug, 1, 7));
            vm.Categories.Add(new BlogPostListItem()
            {
                CategoryName = posts.CategoryName,
                CategorySlug = categorySlug,
                TouTiao = posts.Data?.FirstOrDefault(),
                BlogPosts = posts.Data?.Skip(1).Take(6).ToList()
            });
        }
        return vm;
    }

    var datas = await CacheHelper.GetOrCreateAsync(cacheKeyForCategories,
        async e => await GetDataFromDb());
}

@if (datas?.Categories is { Count: > 0 })
{
    <div class="tuijian-news box whitebg tab-num01">
        <div class="gd-box">
            <ul id="tab">
                @{ var isSet = false; }
                @foreach (var item in datas.Categories)
                {
                    <li class="@(isSet == false ? "tab-current" : "")">@item.CategoryName</li>
                    isSet = true;
                }
            </ul>
        </div>
        <div id="tab-content">
            @foreach (var cat in datas.Categories)
            {
                <section class="tab-box">
                    @if (cat.TouTiao != null)
                    {
                        <div class="tuijian-news-pic">
                            <i>
                                <a target="_blank" href="@cat.TouTiao.CreationTime.ToString("/yyyy/MM")/@cat.TouTiao.Slug">
                                    <img src="@cat.TouTiao.Cover"><span>推荐</span>
                                </a>
                            </i>
                            <h2>
                                <a target="_blank" href="@cat.TouTiao.CreationTime.ToString("/yyyy/MM")/@cat.TouTiao.Slug">@cat.TouTiao.Title</a>
                            </h2>
                            <p>@cat.TouTiao.Description</p>
                            <p>
                                <a href="#">@(cat.TouTiao.Original ?? SiteOptions.Value.Owner)</a> - @cat.TouTiao.CreationTime.ToString("yyyy-MM-dd")
                            </p>
                            <a target="_blank" href="@cat.TouTiao.CreationTime.ToString("/yyyy/MM")/@cat.TouTiao.Slug" class="btn-blue-border">阅读更多</a>
                        </div>
                    }
                    @if (cat.BlogPosts is {Count:>0})
                    {
                        <div class="tuijian-news-list">
                            <ul>
                                @foreach (var blogPost in cat.BlogPosts)
                                {
                                    <li>
                                        <a target="_blank" href="@blogPost.CreationTime.ToString("/yyyy/MM")/@blogPost.Slug">
                                            <span>
                                                <b>@blogPost.CreationTime.Day</b>@blogPost.CreationTime.ToString("yyyy-MM")
                                            </span>
                                            <h3>@blogPost.Title</h3>
                                            <p>@blogPost.Description</p>
                                        </a>
                                    </li>
                                }
                            </ul>
                        </div>
                    }
                    <span class="tab-a-more">
                        <a href="/cat/@cat.CategorySlug" title="更多@(cat.CategoryName)">
                            <i></i><i></i><i></i>
                        </a>
                    </span>
                </section>
            }
        </div>
    </div>
}